<template>
    <div class="inquirydetails">
    	<div class="homePage_list_title flex">
    		
    		<i class="el-icon-arrow-left" @click="fh" ></i>
    		<span>{{language_inquirydetails.Reply}}</span>
    		<div class="flex1 justify_end" style="flex:1;width:10px;height: 100%;display: flex;justify-content: flex-end;">
    			<i class="el-icon-arrow-up" style="float: right;padding: 0 0rem;cursor: pointer;font-weight: bold;margin: 0;" :title="language_inquirydetails.previous" @click="DetailInfo(2)"></i>
    	
    			<i class="el-icon-arrow-down" style="float: right;padding: 0 1rem;cursor: pointer;font-weight: bold;margin: 0;" :title="language_inquirydetails.next" @click="DetailInfo(1)"></i>
    		</div>
    		
    		<!--<div style="float: right;background: rgba(255, 255, 255, 0.5);text-align: center;width: 2rem;text-indent: 0px;margin-right: 1rem;">
    			<i class="el-icon-arrow-up" style="color: #5d7eff;font-size: 1rem;margin: 0;" @click="data2list(2)" v-if='Data3Key!=0'></i>
    		</div>
    		<div style="float: right;background: rgba(255, 255, 255, 0.5);text-align: center;width: 2rem;text-indent: 0px;margin-right: 1rem;">
    			<i class="el-icon-arrow-down" style="color: #5d7eff;font-size: 1rem;margin: 0;" @click="data2list(1)" v-if='Data3Key!=(Data3.length-1)'></i>
    		</div>-->
    	</div>
    	
    	
    	<div class="inquirydetails_r clear2">
	    	<div class="inquirydetails_r_content clear2" ref='inquirydetails_r_content' :class="{'inquiryBorder':transitionShow}">
	    		<div v-for="(data,key) in detail" class="inquirydetails_r_receiver">
	    			<div class="inquiryTitle">
	    				<p>From:{{data.isBuyer==2?data.supplier:data.buyer}}
	    					<span style="float: right;" v-if="data.isBuyer==1" :class="data.supplierStatus==1?'red':'green'">{{data.supplierStatus==1?language_inquirydetails.unread:language_inquirydetails.read}}
		    					<i :class="data.supplierStatus==1?'el-icon-information':'el-icon-circle-check'"></i>
		    				</span>
	    				</p>
	    				<p>Date:{{data.gmtCreate | timer}}</p>
	    				<p>To:{{data.isBuyer==2?data.buyer:data.supplier}}</p>
	    				<p>Subject:{{data.title}}</p>
	    			</div>
	    			<p class="inquirydetails_r_receiver3" v-html="data.content" style="position: relative;">{{data.content}}</p>
	    		</div>
	    		
	    	</div>
	    	
    	</div>
    	<div style="clear: both;height: 3rem;"></div>
    	<div class="new_reply" @click="transitionShow=true">
    		{{language_inquirydetails.reply}}
    	</div>
    	<div v-show="transitionShow" class="inquiryReply">
    		<div class="homePage_list_title flex">
	    		
	    		<i class="el-icon-arrow-left" @click="fh2" ></i>
	    		<span>{{language_inquirydetails.Reply}}</span>
	    		<!--<div style="float: right;background: rgba(255, 255, 255, 0.5);text-align: center;width: 2rem;text-indent: 0px;margin-right: 1rem;">
	    			<i class="el-icon-arrow-up" style="color: #5d7eff;font-size: 1rem;margin: 0;" @click="data2list(2)" v-if='Data3Key!=0'></i>
	    		</div>
	    		<div style="float: right;background: rgba(255, 255, 255, 0.5);text-align: center;width: 2rem;text-indent: 0px;margin-right: 1rem;">
	    			<i class="el-icon-arrow-down" style="color: #5d7eff;font-size: 1rem;margin: 0;" @click="data2list(1)" v-if='Data3Key!=(Data3.length-1)'></i>
	    		</div>-->
	    	</div>
	    	<div >
	    		<div  class="clear2 new_inquiry_seng flex align_center">
					<div class="BSmanagementEdit_div_left">
						To：
					</div>
					<div class="BSmanagementEdit_div_right flex1">
						{{list.user.companyName}}
					</div>
			
				</div>
				<div  class="clear2 new_inquiry_seng flex align_center">
					<div class="BSmanagementEdit_div_left ">
						{{language_inquirydetails.Subject}}：
					</div>
					<div class="BSmanagementEdit_div_right flex1">
						<el-input v-model="textareaTitle"  :maxlength='50'></el-input>
					</div>
			
				</div>
				<div  class="clear2 new_inquiry_seng flex ">
					
					<div class="BSmanagementEdit_div_right flex1">
						<el-input
						  type="textarea"
						  autosize
						  :placeholder="language_inquirydetails.message"
						  v-model="textarea">
						</el-input>
						
						<div class="new_reply" style="z-index: 103;" @click="replyCustomer">
				    		Send
				    	</div>
						
					</div>	
	
			
				</div>
	    	</div>
          	
        </div>
        <div class='IconfirmBox' @click='isRemoveBox=false' :class='isRemoveBox?"IconfirmBoxIn":""'>
			<div class='IconfirmBoxCont' @click.stop='ReturnconfirmBox' :class='isRemoveBox?"IconfirmBoxContActive":""'>
				<p>{{language_inquirydetails.SInquiryNote}}</p>
				<div>
					<span @click.stop='isRemoveBox=false'>{{language_inquirydetails.SRepCancel}}</span>
					<span @click.stop='emitBox'>{{language_inquirydetails.SInquiryAbandon}}</span>
				</div>
			</div>
		</div>
		<!--<div class='IconfirmBox' @click='CloseSuccessBox' :class='isSuccessBox?"IconfirmBoxIn":""'>
			<div class='IconfirmBoxCont' @click.stop='ReturnconfirmBox' :class='isSuccessBox?"IconfirmBoxContActive":""'>
				<p class='IconfirmBoxicon'><span>√</span></p>
				<p>{{language_inquirydetails.SInquirySucc}}</p>
			</div>
		</div>-->
    </div>
</template>

<script>
    export default {
    	components: {
        },
    	filters: {
    		timer(val){
    			let time = new Date(val);
				let y = time.getFullYear();
				let m = time.getMonth()+1;
				m=m<10?'0'+m:m;
				let d = time.getDate();
				d=d<10?'0'+d:d;
				let h = time.getHours();
				h=h<10?'0'+h:h;
				let mm = time.getMinutes();
				mm=mm<10?'0'+mm:mm;
				let s = time.getSeconds();
				s=s<10?'0'+s:s;
				return y+'-'+m+'-'+d+' '+h+':'+mm+':'+s;
    		}
    	},
    	watch:{
    		language(val){
    			this.language_inquirydetails=val.buyers_inquirydetails;
    		}
    	},
    	props:[
    		'language'
    	],
        data: function(){
            return {
            	isRemoveBox:false,
            	isSuccessBox:false,
            	language_inquirydetails:[],
            	//右边宽度
               	detailsWidth:'', 
               	//联系人数据
               	list:{
               		user:{
               			'contactInfo':[],
               		},
               		productList:[]
               	},
               	//文本域
               	textarea:'',
               	//选择数据
               	checkNameTarget:'',
               	//站内信
               	detail:[],
               	transitionShow:false,
               	textareaTitle:'',
               	detailHeihgt:[],
            }
        },
        mounted(){
        	if(this.language.buyers_inquirydetails){
        		this.language_inquirydetails=this.language.buyers_inquirydetails;
        	}
        	
        	let s_html = this.$route.query.object1;
        	
//      	this.enquiry(); 
			s_html != undefined?this.checkNameTarget = JSON.parse(s_html):'';
			this.querySupplierDetail();
			this.queryEnquiryUserInfo();
        	
        },
        methods: {
        	CloseSuccessBox(){
				this.isSuccessBox=false;
			},
        	emitBox(){
				this.isRemoveBox=false;
				this.transitionShow=false;
				this.textarea='';
			},
        	ReturnconfirmBox(){
				return;
			},
        	fh(){
        		window.history.go(-1);
        	},
        	fh2(){
        		let Content =this.textarea;
        		if(Content.trim()==''){
        			this.transitionShow=false;
        		}
        		else{
        			this.isRemoveBox=true;
        		}
        		
        		
        	},
        	to_iframe() {
        		let key = localStorage.getItem("iframeKey");
        		let height= localStorage.getItem("iframe");
        		key = parseInt(key);
        		height = parseFloat(height);
        		this.$set(this.detailHeihgt[key],'_height',height);
				
			},
        	handleIconClick(val){
        		
        	},
        	DetailInfo(type){
        		this.ajax(this,{
        			'url':this.defines.html_url+'/buyer/message/querySupplierDetailInfo',
        			'type':'post',
        			'data':this.checkNameTarget.id,
        			'callback':data=>{
        				if(data.data.success){
        					if(type==1){
        						if(data.data.data.nextId==null){
	        						this.$message({
										message: this.language_inquirydetails.records,
										type: 'error'
									});
									return false
	        					}
				        		this.checkNameTarget.id=data.data.data.nextId;	
				        	}
        					else{
        						if(data.data.data.prevId==null){
	        						this.$message({
										message: this.language_inquirydetails.records,
										type: 'error'
									});
									return false
	        					}
        						this.checkNameTarget.id=data.data.data.prevId;	
        					}
        					
        					this.querySupplierDetail();
							this.queryEnquiryUserInfo();
        					
	        			}
        				else{
        					this.$message({
								message: data.data.errMsg,
								type: 'error'
							});
        				}
        				
        			},
        			'errorback':errory=>{
        				
        			},
        			
        		})
        	},
        	imChatjump(id){
        		this.$emit('imf', id)
        	},
        	//左侧发信者信息
        	queryEnquiryUserInfo(){
        		console.log(this.checkNameTarget);
        		this.ajax(this,{
        			'url':this.defines.html_url+'/buyer/message/querySupplierDetailInfo',
        			'type':'post',
        			'data':this.checkNameTarget.id,
        			'callback':data=>{
        				if(data.data.success){
        					this.list=data.data.data;
        				}
        				else{
        					this.$message({
								message: data.data.errMsg,
								type: 'error'
							});
        				}
        				
        			},
        			'errorback':errory=>{
        				
        			},
        			
        		})
        	},
        	
        	//回复
        	replyCustomer(){
        		let Content =this.textarea;
        		if(Content.indexOf('<img')<0){
        			Content = Content.replace(/<[^>]+>/g,"");
        			Content = Content.replace(/&nbsp;/g,"");
	        		if(Content.trim()==''){
	        			this.$message({
							message: this.language_inquirydetails.replyCustomer1,
							type: 'error'
						});
	        			return false;
	        		}
        		}
        		
        		if(this.textareaTitle.trim()==''){
        			this.$message({
						message: this.language_inquirydetails.replyCustomer2,
						type: 'error'
					});
        			return false;
        		}
        		
        		this.ajax(this,{
        			'url':this.defines.html_url+'/buyer/message/chat',
        			'type':'post',
        			'data':{
        				'supplierId':this.checkNameTarget.supplierId,
        				'mId':this.checkNameTarget.id,
        				'title':this.textareaTitle,
        				'content':this.textarea,
        			},
        			'callback':data=>{
        				if(data.data.success){
        					this.querySupplierDetail();
        					this.textarea='';
        					this.textareaTitle='';
        					this.transitionShow=false;
        					this.$refs.myTextEditor.deleteData();
        				}
        				else{
        					this.$message({
								message: data.data.errMsg,
								type: 'error'
							});
        				}
        				
        			},
        			'errorback':errory=>{
        				
        			},
        			
        		})
        	},
        	//站内信查询
        	querySupplierDetail(){
        		this.ajax(this,{
        			'url':this.defines.html_url+'/buyer/message/queryBuyerDetail',
        			'type':'post',
        			'data':this.checkNameTarget.id,
        			'callback':data=>{
        				if(data.data.success){
        					if(data.data.data==null||data.data.data[0]==null||data.data.data.length==0){
        						this.options=[];
        					}
        					else{
        						this.detail= data.data.data;
        						for(let i in this.detail){
        							this.detailHeihgt.push({
        								'_height':0
        							});
        						}
        						this.textareaTitle=this.detail[0].title
        						this.scrollTop();
        					}
        					
        				}
        				else{
        					this.$message({
								message: data.data.errMsg,
								type: 'error'
							});
        				}
        				
        			},
        			'errorback':errory=>{
        				
        			},
        			
        		})
        	},
        	enquiry(){
        		var productList = new Array();
				var attribute1 = {pId:3 ,quantity:5, productPic:'productPic', productDesc:'productDesc', productPrice:20};
				var attribute2 = {pId:4 ,quantity:5, productPic:'productPic1', productDesc:'productDesc1', productPrice:30};
				productList.push(attribute2);
				productList.push(attribute1);

        		let list =new Array();
        		let param ={
        				'supplierId':'1989', 
        				'title':'6title', 
        				'content':'6content',
        				'productList':productList,
        		};
        		list.push(param);
        		this.ajax(this,{
        			'url':this.defines.html_url+'/buyer/message/enquiry',
        			'type':'post',
        			'data':list,
        			'callback':data=>{
        				if(data.data.success){
        					console.log(data)
        					
        					
        				}
        				else{
        					this.$message({
								message: data.data.errMsg,
								type: 'error'
							});
        				}
        				
        			},
        			'errorback':errory=>{
        				
        			},
        			
        		})
        	},
        	scrollTop(){
//      		let _this = this;
//      		setTimeout(function(){
//      			_this.$refs.inquirydetails_r_content.scrollTop = _this.$refs.inquirydetails_r_content.scrollHeight;
//      		},100)
        		
        	},
        	
        	back(){
        		this.$router.push({
        			path: '/buyinquirylist',
					query: {
						object2:this.$route.query.object2
					}
				})
        		
        	}
            
        }
    }
</script>

<style scoped>
	.new_inquiry_seng{
		width: 100%;display: flex;padding:  1rem;box-sizing: border-box;
		align-items: center;
	}
	
	.new_reply{
		z-index: 100;
		text-align: center;
	    background: #5d7eff;
	    color: #fff;
	    cursor: pointer;
	    height: 3rem;
	    line-height: 3rem;
	    font-size: 1.5rem;
	    width: 100%;
	    background: url(/static/img/leimu3.8b70f34.png);
	    background-size: 100%;
	    align-items: center;
	    position: fixed;
	    bottom: 0;
	    left: 0;
	}
	.homePage_list_title{
   	text-indent: 0.5rem;
   	font-size: 1.4rem;
   	line-height: 2rem;
   	padding: 3% 0;
   	display: flex;
   	background: url(../../../../../static/img/images/leimu.png);
   	background-size: 100%;
   	color: #fff;
   	
   }
   .homePage_list_title i{
   	font-size: 1.4rem;
   	margin-right: 1rem;
   	line-height: 2rem;
   }
	.clear2:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}
	
	.clear2 {
		zoom: 1
	}
    .inquirydetails{
    	margin: 0px;
    	
    }
    .inquirydetails_top{
    	height: 38px;
    	width: 100%;
    	border: 1px solid #e5eaf1;
    	display: flex;
    	box-sizing: border-box;
    	align-items: center;
    	font-size: 14px;
    	background: #e3effe;
    }
    .inquirydetails_top a{
    	margin: 0 5px;
    }
    .inquirydetails_l{
    	float: left;
    	margin-bottom: 20px;
    	width: 393px;
    	border: 1px solid #e5eaf1;
    	border-top: 0;
    	padding: 0 23px;
    	background: #fff;
    	box-sizing: border-box;
    }
    .inquirydetails_l_top{
    	padding: 27px 0 34px 0;
    	border-bottom: 1px dashed #d3e6ff;
    	height: 100px;
    	
    }
    .inquirydetails_l_img{
    	width: 100px;
    	height: 100px;
    	float: left;
    	border-radius: 100px;
    	overflow: hidden;
    	margin-right: 10px;
    	
    }
    .inquirydetails_l_img img{
    	width: 100px;
    	height: 100px;
    }
    .inquirydetails_l_name{
    	float: left;
    }
    .inquirydetails_l_name1{
    	height: 50px;
    	line-height: 50px;
    	color: #000000;
    	font-size: 14px;
    	
    	display: flex;
    	align-items: center;
    }
    .inquirydetails_l_name1 p{
    	max-width: 150px;
    	overflow: hidden;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    }
    .inquirydetails_l_name1 i {
    	font-size: 25px;
    	margin-left: 50px;
    	color: #017efe;
    	cursor: pointer;
    }
    .inquirydetails_l_name2{
    	height: 30px;
    	line-height: 30px;
    	cursor: pointer;
    	display: flex;
    	font-size: 14px;
    	align-items: center;
    	color: #63666b;
    }
    .inquirydetails_l_name2 img{
    	margin-right: 8px;
    }
    .inquirydetails_l_company{
    	padding: 10px 5px;
    }
    .inquirydetails_l_company1{
    	font-size: 14px;
    	font-weight: bold;
    	line-height: 25px;
    	margin: 15px 0;
    	color: #000;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
    	cursor: default;
    	
    }
    .inquirydetails_l_company2{
    	color: #63666b;
    	font-size: 14px;
    	line-height: 25px;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
    	cursor: default;
    }
    .inquirydetails_l_content{
    	margin: 15px 5px 40px 5px;
    	
    }
    .inquirydetails_l_content1{
    	font-size: 14px;
    	color: #000;
    	margin: 5px 0;
    }
    .inquirydetails_l_content1 span{
    	display: block;
    	float: left;
    	color: #63666b;
    	width: 140px;
    }
    .inquirydetails_l_content1 a{
    	display: block;
    	float: left;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	width: 185px;
    	cursor:default;
    }
    .inquirydetails_r{
    	border-top: 0;
    	width: 100%;
    	background: #fff;
    	box-sizing: border-box;
    }
    .inquirydetails_r_receiver{
    	padding: 2rem 1rem;
    	font-size: 1.4rem;
    	width: 100%;
    	box-sizing: border-box;
    	border-bottom: 0.3rem solid #f0f4f7;
    	
    	
    }
    .inquirydetails_r_receiver p {
    	max-width: 100%;
    	word-break: break-word;
    }
    .inquirydetails_r_receiver1{
    	color: #63666b;
    	line-height: 40px;
    }
    .inquirydetails_r_receiver2{
    	font-weight: bold;
    	color: #000;
    	line-height: 20px;
    	margin-bottom: 5px;
    }
    .inquirydetails_r_receiver3{
    	width: 100%;
    	box-sizing: border-box;
    	padding: 0.5rem 1rem;
    	font-size: 1.6rem;
    	line-height: 2.5rem;
    }
   
    .inquirydetails_r_sender{
    	padding: 40px 0;
    	font-size: 14px;
    	width: 80%;
    	float: right;
    	
    }
    .inquirydetails_r_sender p{
    	max-width: 100%;
    }
    .inquirydetails_r_sender1{
    	color: #63666b;
    	line-height: 40px;
    	text-align: right;
    }
    .inquirydetails_r_sender2{
    	font-weight: bold;
    	color: #000;
    	line-height: 20px;
    	word-wrap: break-word;
    	margin-bottom: 5px;
    	float: right;
    	clear: both;
    }
    .inquirydetails_r_sender3{
    	line-height: 20px;
    	float: right;
    	clear: both;
    	word-break: break-word;
    }
  
    .inquirydetails_r_content{
    	width: 100%;
    	box-sizing: border-box
    }
    .inquirydetails_r_textarea{
    	padding: 10px;
    	border-top: 1px solid #e5eaf1;
    	position: relative;
    	height: 150px;
    	box-sizing: border-box;
    }
    .inquirydetails_r_textareatrue{
    	display: inline-flex;
    	float: right;
    	padding: 0 25px ;
    	margin-top: 20px;
    	height: 35px;
    	background: #017efe;
    	display: flex;
    	align-items: center;
    	font-size: 14px;
    	color: #fff;
    	border-radius: 4px;
    	cursor: pointer;
    	
    	
    }
    .inquirydetails_r_textareatrue img{
    	margin-right: 5px;
    }
    .green{
    	color: #13ce66;
    	
    }
    .red{
    	color: #ff4949;
    	
    }
     .inquirydetails_l_product{
    	color: #666666;
    	font-size: 14px;
    	line-height: 35px;
    	margin-top: 15px;
    }
    .inquirydetails_lproductimg{
    	float: left;
    	width: 110px;
    	margin-right: 20px;
    }
    .inquirydetails_lproductimg img{
    	width: 100%;
    }
    .inquirydetails_lproductcontent{
    	float: left;
    	flex: 1;
    	width: 10px;
    }
    .inquirydetails_lproductcontentp1{
    	font-size: 14px;
    	color: #333;
    	font-weight: bold;
    	word-break: break-word;
    }
    .inquirydetails_lproductcontentp2{
    	color: #666666;
    	font-size: 14px;
    	line-height: 20px;
    	margin: 10px 0 20px 0;
    }
    .inquirydetails_lproductcontentd{
    	margin-bottom: 10px;
    	font-size: 14px;
    }
    .inquirydetails_lproductcontentd span:nth-child(1){
    	color: #626262;
    }
    .inquirydetails_lproductcontentd span:nth-child(2){
    	color: #333333;
    }
     .inquiryTitle{
    	background: #f6f8fa;
    	border: 1px dashed #e7e8e9;
    	width: 100%;
    	box-sizing: border-box;
    	padding: 0.5rem 1rem;
    }
    .inquiryTitle p{
    	font-size: 1.4rem;
    	line-height: 2.5rem;
    }
    .inquiryBorder{
    	border-top: 1px solid #e5eaf1;
    }
    .BSmanagementEdit_div_left  {
    	font-size: 1.4rem;
    	line-height: 2rem;
	}
	.BSmanagementEdit_div_right {
		flex: 1;
		font-size: 1.4rem;
		line-height: 2rem;
	}
	
	.BSmanagementEdit_must:after {
		position: absolute;
		content: '*';
		color: red;
		top: 0;
		left: -8px;
	}
	.inquiryReply{
		background: #fff;
		width: 100%;
		margin-bottom: 20px;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 101;
	}
	.IconfirmBox{position: fixed;width: 100%;height:100%;top:0;left:0;background:rgba(0,0,0,.5);z-index:105;
	-webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);}
    .IconfirmBoxIn{-webkit-transform: translateZ(0);transform: translateZ(0);}
    .IconfirmBoxCont{position: absolute;z-index: 3;background: #fff;width:90%;top:50%;left:5%;height:10rem;margin-top: -5rem;opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
	}
	.IconfirmBoxContActive{opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);}
	.IconfirmBoxCont p{width: 90%;line-height: 1.5rem;margin:2rem auto;font-size: 1.6rem;text-align: center;}
	.IconfirmBoxCont div{position: absolute;bottom:0;width: 100%;height:4rem;line-height: 4rem;left:0;border-top:1px solid #ccc;}
	.IconfirmBoxCont div span{display: block;width: 50%;float: left;text-align: center;font-size: 1.6rem;box-sizing:border-box;}
	.IconfirmBoxCont div span+span{border-left:1px solid #ccc;}
	.IconfirmBoxCont .IconfirmBoxicon{margin:2rem auto;text-align: center;}
	.IconfirmBoxCont .IconfirmBoxicon span{display: block;width: 3rem;height:3rem;border-radius: 50%;background: #03be02;text-align: center;line-height: 3rem;font-size: 1.6rem;color:#fff;margin:0 auto;}
	
	    
</style>
<style>
	.BSmanagementEdit_div_right input{
		border: 0 !important;
	}
	.BSmanagementEdit_div_right textarea{
		border: 0 !important;
	}
	.inquirydetails_r_textarea1 textarea{
    	height: 125px !important;
    	border: 0;
    }
     .inquirydetails_r_receiver3 img{
    	max-width: 100%;
    }
    .inquirydetails_r_sender3 img{
    	max-width: 100%;
    }
</style>